<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :md="16">
        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>项目基础信息</span>
          </div>
          <el-form :model="form" label-width="100px">
            <el-row :gutter="12">
              <el-col :md="12">
                <el-form-item label="招标名称">{{ form.title }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="招标编号">{{ form.code }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="采购单位">{{ form.company }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="招标方式">{{ form.way }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>专家评标</span>
            <el-button type="primary" plain class="float-right" size="small"
              >历史评分
            </el-button>
          </div>
          <el-row :gutter="8">
            <el-col :md="6" v-for="(item, index) in expert" :key="index">
              <el-card shadow="never" style="background: #e9e9e9">
                {{ item.name }}
                <ul>
                  <li>技术标：{{ item.tec }}</li>
                  <li>商务标：{{ item.bus }}</li>
                </ul>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>评标项目</span>
            <div class="float-right">
              <el-button type="primary" size="small" plain
                >查看比价明细
              </el-button>
              <el-button
                @click="dialogVisible = true"
                type="primary"
                size="small"
                >确认拟标结果
              </el-button>
              <el-button type="primary" size="small"
                >发起下轮报价（组长）
              </el-button>
            </div>
          </div>
          <el-table :data="lists" border highlight-current-row>
            <el-table-column
              label="供应商"
              prop="supplier"
              min-width="200"
            ></el-table-column>
            <el-table-column
              label="报价IP"
              prop="IP"
              min-width="160"
            ></el-table-column>
            <el-table-column label="第一轮评分" align="center">
              <el-table-column
                label="技术评分"
                prop="round-1-tec"
                align="center"
              ></el-table-column>
              <el-table-column
                label="商务评分"
                prop="round-1-bus"
                align="center"
              ></el-table-column>
            </el-table-column>
            <el-table-column label="第二轮评分" align="center">
              <el-table-column
                label="技术评分"
                prop="round-2-tec"
                align="center"
              ></el-table-column>
              <el-table-column
                label="商务评分"
                prop="round-2-bus"
                align="center"
              ></el-table-column>
            </el-table-column>
            <el-table-column label="评分汇总" align="center">
              <template slot-scope="scope">
                <span>{{
                  scope.row["round-1-tec"] +
                  scope.row["round-1-bus"] +
                  scope.row["round-2-tec"] +
                  scope.row["round-2-bus"]
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>评标意见</span>
          </div>
          <el-input
            type="textarea"
            v-model="opinion"
            placeholder="第一次评标，给个好评。谢谢！"
          ></el-input>
        </el-card>
      </el-col>
      <el-col :md="8">
        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>评标流程记录</span>
          </div>
          <div style="height: 200px">
            <el-steps direction="vertical" :active="2">
              <el-step
                title="签到"
                description="确认签到   2020-12-12  12:00:00"
              ></el-step>
              <el-step title="评标">
                <template slot="title">
                  <router-link to="/bidding/evaluation_hall_expert">
                    评标
                  </router-link>
                </template>
              </el-step>
              <el-step title="拟定结果">
                <template slot="title">
                  <router-link to="/bidding/evaluation_result_expert">
                    拟定结果
                  </router-link>
                </template>
              </el-step>
            </el-steps>
          </div>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>在线沟通</span>
          </div>
          <ul class="list" style="list-style-type: none; padding: 0">
            <li class="clearfix mb-10" v-for="i in 6" :key="i">
              <span class="float-left">供应商{{ 1 }}</span>
              <span class="float-right">16:44:43</span>
            </li>
          </ul>
        </el-card>
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>澄清公告</span>
          </div>
          <ul class="list">
            <li class="clearfix mb-10" v-for="i in 6" :key="i">
              <span class="float-left">澄清名称{{ i }}</span>
              <span class="float-right">16:44:43</span>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      title="确定拟定结果"
      top="50px"
      :visible.sync="dialogVisible"
      width="45%"
    >
      <el-table
        class="mb-20"
        :data="listAgree"
        border
        highlight-current-row
        :span-method="objectSpanMethod"
      >
        <el-table-column label="物料名称" prop="name"></el-table-column>
        <el-table-column
          label="规格型号"
          prop="model"
          align="center"
        ></el-table-column>
        <el-table-column
          label="采购单位"
          prop="company"
          width="300"
        ></el-table-column>
        <el-table-column
          label="采购数量"
          prop="count"
          align="center"
          width="140"
        ></el-table-column>
      </el-table>

      <el-form :model="form" label-width="120px">
        <el-form-item label="拟定结果确认" required>
          <el-radio-group v-model="radio">
            <el-radio :label="1">同意</el-radio>
            <el-radio :label="2">不同意</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="意见">
          <el-input type="textarea" v-model="degMessage"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: "招标名称",
        code: "XJD-998376241",
        company: "叮当（天津）电子商务有限公司",
        way: "公开招标",
      },
      expert: [],
      lists: [
        {
          supplier: "五矿机电有限公司",
          IP: "221.239.1.186",
          "round-1-tec": 19,
          "round-1-bus": 20,
          "round-2-tec": 19,
          "round-2-bus": 20,
        },
        {
          supplier: "惠企机电设备有限公司",
          IP: "221.239.1.186",
          "round-1-tec": 19,
          "round-1-bus": 20,
          "round-2-tec": 19,
          "round-2-bus": 20,
        },
        {
          supplier: "惠企机电设备有限公司2",
          IP: "221.239.1.186",
          "round-1-tec": 19,
          "round-1-bus": 20,
          "round-2-tec": 19,
          "round-2-bus": 20,
        },
      ],
      listAgree: [
        {
          name: "物料A",
          model: "规格型号",
          company: "衡水液力胶管有限公司",
          count: 1000,
        },
        {
          name: "物料A",
          model: "规格型号",
          company: "衡水旭丰管道装备有限公司",
          count: 500,
        },
        {
          name: "物料A",
          model: "规格型号",
          company: "上海希玛科技(集团)有限公司",
          count: 2000,
        },
        {
          name: "物料B",
          model: "规格型号",
          company: "衡水旭丰管道装备有限公司",
          count: 1300,
        },
        {
          name: "物料B",
          model: "规格型号",
          company: "衡水液力胶管有限公司",
          count: 1000,
        },
        {
          name: "物料B",
          model: "规格型号",
          company: "上海希玛科技(集团)有限公司",
          count: 1500,
        },
        {
          name: "物料C",
          model: "规格型号",
          company: "衡水液力胶管有限公司",
          count: 1100,
        },
        {
          name: "物料C",
          model: "规格型号",
          company: "衡水旭丰管道装备有限公司",
          count: 4000,
        },
        {
          name: "物料C",
          model: "规格型号",
          company: "上海希玛科技(集团)有限公司",
          count: 1000,
        },
      ],
      opinion: "",
      message: "",
      dialogVisible: false,
      radio: 1,
      degMessage: "",
    };
  },
  methods: {
    initExperts() {
      for (let i = 0; i < 4; i++) {
        this.expert.push({
          name: "张小刚",
          tec: "已完成评标",
          bus: "已完成评标",
        });
      }
    },
    handleResultsAgree() {
      // this.$alert("是否同意该拟标结果", "确认拟标", {
      //   confirmButtonText: "确定",
      //   callback: action => {
      //     this.$router.push({
      //       name: "EvaluationResultAgree"
      //     });
      //   }
      // });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
  created() {
    this.initExperts();
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #e3e3e3;
  min-height: 100vh;
}
</style>
